/**
 * @author zhangqiang
 * @data 2017/3/14
 *  订单详情
 * */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import {Tabs, WhiteSpace } from 'antd-mobile'
import style from './index.scss'
import {Progress} from '../../components/common'
import BottomMenu from '../../../../../../src/js/components/bottomMenu';

import OrderList from '../../components/orderDetails/index'
// import OrderList from '../../components/payment/index'

import {Title} from '../../components/common'
import 'style/orderDetails.scss';
import {getOrderDetails} from '../../actions/orderDetailsActions'
import common from '../../utils/common'

class OrderDetails extends Component {
	constructor(props) {
		super(props)
		this.state = {
			data: ''  //详情页数据
		}
		this.chargeId=this.props.params.chargeId
		this.orderId=this.props.params.orderId
		this.type=this.props.params.type
	}

	componentWillMount() {
		let getData={
			chargeOrderId: this.chargeId,
			orderId: this.orderId
		}
		this.props.dispatch(getOrderDetails(getData))
	}

	componentWillUnmount() {

	}

	componentDidMount() {
		common.setViewTitle('订单详情');
	}

	toUrl(url) {
		this.context.router.push(url);
	}
	//底部跳转
    bottomHandle(index) {
        if (index == 0) {
            this.props.router.push('/');
        }
        else {
            this.props.router.push('orderList');
        }
    }

	render() {
		let res = this.props.detailsData;
		let fmtAll = 'yyyy-MM-dd hh:mm:ss';
		let processTime=common.format(res.processlist&&res.processlist[0].createTime,fmtAll);
		let payTime=common.format(res.payTime,fmtAll);
		let createTime=common.format(res.createTime,fmtAll);
		let completeTime = common.format(res.completeTime,fmtAll);				
		let status = res.status==3||res.status==4||res.status==5;  //订单失败状态
		let preFix = res.carNumber&&res.carNumber.substring(0,2);
		
		return (
			<div className={style.orderDetails}>
				{/*订单状态-start-*/}
				<Progress status={res.status}/>
				{/*订单状态-end-*/}
				<div style={{height: '.24rem'}}></div>

				<div className={style.orderState} >
					<img src={status?"./images/error_icon.png":"./images/success_icon.png"} alt=""/>
					<div style={status?{color: 'red'}:{color: '#00B488'}}>{res.statusName}</div>
					<p>{res.statusDescDetail}</p>
				</div>

				<div style={{height: '.24rem'}}></div>
				{/*订单列表-start-*/}

				<div className={style.required}>
					<div>请准备好以下所需资料</div>
					{
						res.docArray&&res.docArray.map((item,i)=>{
							return <div key={i}>{item}</div>
						})
					}
				</div>
				<div style={{height: '.24rem'}}></div>

				<OrderList data={res} />

				{/*订单列表-end-*/}
				<div style={{height: '.38rem'}}></div>

				<div className={style.processProgress}>
					<div className={style.title+' '+'border_bottom_1'}>
						<i></i><span>办理进度</span>
						<div className={style.toDetail} onClick={()=>{this.toUrl(`handlingProgress/${this.orderId}/${this.chargeId}`)}}>
							<span>查看进度详情</span>
							<img src="./images/icon_to_r.png" alt=""/>
						</div>
					</div>

					<div className={style.currentProgress}>
						<div className={style.curretLine}>
							<img src="./images/icon_success.png" alt=""/>
							<div className={style.text_s}>{res.processlist&&res.processlist[0].name}</div>
							<div className={style.time_d}>{processTime}</div>
						</div>
					</div>
				</div>

				<div style={{height: '.24rem'}}></div>

				<div className={style.handleProcess}>
					<Title text='办理说明' isLine={true}/>
					<div className={style.process}>
						<div className={style.processStyleAll+' '+style.sm_icon}>
							{
								common.isToPay(preFix,res.address&&res.address.cityId)?
								'提交审核':'下单支付'
							}
							
						</div>
						<div className={style.processStyleAll+' '+style.xd_icon}>
							上门收取资料
						</div>

						<div className={style.processStyleAll+' '+style.ss_icon}>
							办理年检
						</div>
						<div className={style.processStyleAll+' '+style.cz_icon}>
							回寄资料
						</div>
						
					</div>
				</div>

				<div style={{height: '.24rem'}}></div>

				<div className={style.details}>
					<Title text='订单详情' isLine={true}/>
					<div className={style.detailList}>
						<div className={style.msg}>
							<span>订单编号</span>
							<span>{res.orderId}</span>
						</div>
						<div className={style.msg}>
							<span>支付方式</span>
							<span>
								{
									common.isToPay(preFix,res.address&&res.address.cityId)?
									'到付':
									res.payType == 2?'支付宝':
									res.payType == 3?'微信':''
								}
							</span>
						</div>
						<div className={style.msg}>
							<span>交易号</span>
							<span>{res.payNo}</span>
						</div>
						<div className={style.msg}>
							<span>创建时间</span>
							<span>{createTime}</span>
						</div>
						<div className={style.msg}>
							<span>支付时间</span>
							<span>{payTime}</span>
						</div>
						<div className={style.msg} style={!res.completeTime?{display: 'none'}:{}}> 
							<span>
								{
									res.status == 8?
									'完成时间':'关闭时间'
								}
							</span>
							<span>{completeTime}</span>
						</div>
					</div>
				</div>
				<div style={{height: '1.4rem'}}></div>

				{/*底部导航菜单start*/}
				<BottomMenu active={1} onChange={(index) => {
                        this.bottomHandle(index);
                    }} data={[{
                        text: '车辆年检',
                        img: './images/year.png',
                        checkedImg: './images/year_selected.png'
                    }, {text: '我的订单', img: './images/mine.png', checkedImg: './images/mine_selected.png'}]}/>
				{/*底部导航菜单end*/}

			</div>
		)
	}
}

//使用context
OrderDetails.contextTypes = {
	router: React.PropTypes.object.isRequired
};

OrderDetails.defaultProps = {
	detailsData:{},
	list:[]
};

function mapStateToProps(state) {
	return Object.assign({}, state.orderDetailsResult);
}
export default connect(mapStateToProps)(OrderDetails)